<style lang="scss" scoped>
.profile {
    text-align: center;
    margin-bottom: 20px;
    color: #40485b;
    .profile-img {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        object-fit: cover;
        margin-bottom: 15px;
        border: 3px solid #3498db;
    }

    h2 {
        margin-bottom: 5px;
        font-size: 1.5rem;
    }

    p {
        font-size:0.9rem;
    }
    .saying{
        font-size: 16px;
        font-weight: 400;
    }
    .tags {
        display: flex;
        width: 100%;
        justify-content: space-around;
        margin-top: 24px;
        .tag{
            .num{
                font-size: 18px;
                font-weight: 700;
            }
            &:hover{
                cursor: pointer;
                .num{
                    color:#1283ba;;
                }
            }
        }
    }
}
</style>

<template>
    <div>
        <div class="profile">
            <img src="@/assets/images/blog_avatar.jpg" alt="头像" class="profile-img">
            <h2>鎻然</h2>
            <p>- A Mader -</p>
            <span class="saying">怎么,在想我的事?</span>
            <div class="tags">
                <div class="tag" v-for="item in 3" :key="item">
                    <p class="num">10</p>
                    <span class="title">文章</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>

</script>
